<template>
  <div>
    <div class="card-item" style="height: 440px;">
      <p class="card-title">游客停留时间分布</p>
      <div class="card-div">
        <tourist-stay></tourist-stay>
      </div>
    </div>

    <div class="card-item" style="height: 440px; margin-top: 20px;">
      <p class="card-title">游客出游消费构成分析</p>
      <div class="card-div">
        <common-pieNew-chart ref="consumptionStructure" :config="consumptionStructureConfig"></common-pieNew-chart>
      </div>
    </div>

    <!-- <div class="card-item" style="height: 440px; margin-top: 20px;">
      <p class="card-title">游客APP使用类型分析</p>
      <div class="card-div">
        <tourist-app></tourist-app>
      </div>
    </div> -->
    <div class="card-item" style="height: 440px; margin-top: 20px;">
      <p class="card-title">游客到访场所偏好分析</p>
      <div class="card-div">
        <tourist-place></tourist-place>
      </div>
    </div>
  </div>
</template>

<script>
  import TouristStay from '@/views/humanistic-tourism/tourist-style/tourist-stay.vue';
// import TouristApp from '@/views/humanistic-tourism/tourist-style/tourist-app.vue';
import TouristPlace from '@/views/humanistic-tourism/tourist-style/tourist-place.vue';
import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
export default {
  components: {
    TouristStay,
    CommonPieNewChart,
    TouristPlace
  },
  data() {
    return {
      consumptionStructureConfig: {
        request: {
          url: 'url',
          params: {}
        },
        option: {
          id: 'consumptionStructurePie',
          title: '',
          color: ['#6C43F7', '#EDA652', '#3EA2FE', '#77F7E7', '#839DE7', '#7CCAA2'],
          legend: {
            show: true,
            left: '11%',
            top: '83%',
            orient: 'horizontal',
            textStyle: {
              color: '#fff',
              fontSize: 18
            },
            data: []
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c}元<br/>{d}%',
            extraCssText:'z-index: 999'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: ['0%', '55%'],
              center: ['50%', '40%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'top',
                  formatter: '{b}\n{c}元\n{d}%',
                  fontSize: '17'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '17',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: []
            }
          ]
        }
      }
    };
  },
  mounted() {
    // this.$refs.consumptionStructure.initChart();
	this.getCostInfo();
  },
  methods: {
  	getCostInfo() {
  		this.$jqPost(this.$api.getCostInfo,{
			sFJNM: "00010001001400090001",
			sSelAreaName:"全部",
			sYearMonth:'2019-11'
		}).then(res => {

      if (res.retCode == 200 && res.retData) {
        this.consumptionStructureConfig.option.legend.data = res.retData.listData.strarrNameBar1;
        res.retData.listData.arrPie.map(item => {
          this.consumptionStructureConfig.option.series[0].data.push({
            value:parseInt(item.value),
            name:item.name
          })
        })
      }
      this.$refs.consumptionStructure.initChart();
		})
  	}
  },
};
</script>

<style scoped lang="scss" type="text/scss">
  .card-item {
  width: 100% !important;
  > .card-div {
    height: 386px;
  }
}
</style>
